<template>
  <div>
    <IndexHead />
    <div class="list" v-for="item in items" :key="`${item.id}-${item.title}`">
      <Item :item="item" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Item from "../components/Item.vue";
import IndexHead from "../components/IndexHead.vue";
import { useList } from "../stores/dailySign";

export default defineComponent({
  setup() {
    const { items } = useList();
    return {
      items,
    };
  },
  data() {
    return {};
  },
  components: {
    Item,
    IndexHead,
  },
});
</script>

<style scoped>
.list {
  display: flex;
  flex-direction: column;
  padding: 5px 30px;
}
</style>
